<template>
  <div>
    <a-dropdown style="float: right">
      <span class="action ant-dropdown-link user-dropdown-menu">
        <a-avatar class="avatar" size="small" :src="avatar?this.$getFileAccessHttpUrl(avatar):require('@/assets/image/employeeImg.png')"/>
        <span style="margin-left: 5px;">{{ nickname.length>7?(nickname.substring(0,7)+'...'):nickname }}</span>
      </span>
      <template v-slot:overlay>
        <a-menu class="ant-pro-drop-down menu">
          <a-menu-item key="0">
            <router-link :to="{ path: '/account/settings/base' }">
              <a-icon type="user"/>
              个人中心
            </router-link>
          </a-menu-item>
          <a-menu-item key="1">
            <router-link :to="{ path: '/account/settings/security' }">
              <a-icon type="setting"/>
              账户设置
            </router-link>
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'AvatarDropdown',
  components: {
  },
  computed: {
    ...mapGetters(['nickname', 'avatar'])
  },
  methods: {
    ...mapActions(['Logout'])

  }
}
</script>
